<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">

        <p:growl id="messages" showDetail="false"/>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Plain Menu</h1>
                    <h:form>
                        <p:menu>
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages"/>
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org"/>
                                <p:menuitem value="Internal" url="#"/>
                            </p:submenu>
                        </p:menu>
                    </h:form>
                </div>
            </div>

            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Toggleable</h1>
                    <h:form>
                        <p:menu toggleable="true">
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save Fs14" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat Fs14"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close fa fa-close Fs14"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home fa fa-home Fs14"/>
                                <p:menuitem value="Internal" url="#" icon="ui-icon-star fa fa-star Fs14"/>
                            </p:submenu>
                        </p:menu>
                    </h:form>
                </div>
            </div>

            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Overlay</h1>
                    <h:form>
                        <p:commandButton id="dynaButton" value="Show" type="button" icon="ui-icon-extlink fa fa-external-link white Fs14"/>
                        <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save Fs14"/>
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat Fs14"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close fa fa-close Fs14"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home fa fa-home Fs14"/>
                                <p:menuitem value="Internal" url="#" icon="ui-icon-star fa fa-star Fs14"/>
                            </p:submenu>
                        </p:menu>
                    </h:form>
                </div>
            </div>

            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">MenuButton</h1>
                    <h:form>
                        <p:menuButton value="Options">
                            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save Fs14"/>
                            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat Fs14"/>
                            <p:menuitem value="Delete" actionListener="#{menuView.delete}" ajax="false" icon="ui-icon-close fa fa-close Fs14"/>
                            <p:separator />
                            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink fa fa-external-link Fs14"/>
                        </p:menuButton>
                    </h:form>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box">
            <div class="Container100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">ContextMenu</h1>
                    <h:form>
                        Right click!
                        <p:contextMenu>
                            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save"/>
                            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-refresh"/>
                            <p:menuitem value="Delete" actionListener="#{menuView.delete}" ajax="false" icon="ui-icon-close fa fa-close"/>
                            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink fa fa-external-link"/>
                        </p:contextMenu>
                    </h:form>
                </div>
            </div>
            <div class="Container50 Responsive100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SlideMenu</h1>
                    <h:form>
                        <p:slideMenu backLabel="Back" style="width:260px">
                            <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh fa fa-refresh">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save Fs14" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat Fs14" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin fa fa-bolt">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}"  ajax="false" icon="ui-icon-close fa fa-close Fs14"/>
                            </p:submenu>
                            <p:separator />
                            <p:submenu label="Navigations" icon="ui-icon-extlink fa fa-external-link">
                                <p:submenu label="Prime Links">
                                    <p:menuitem value="Prime" url="http://www.prime.com.tr" />
                                    <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
                                </p:submenu>
                                <p:menuitem value="Mobile" url="#" />
                            </p:submenu>
                        </p:slideMenu>
                    </h:form>
                </div>
            </div>

            <div class="Container50 Responsive100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">TieredMenu</h1>
                    <h:form>
                        <p:tieredMenu style="width:200px">
                            <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh fa fa-refresh">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin fa fa-bolt">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close fa fa-close" />
                            </p:submenu>
                            <p:separator />
                            <p:submenu label="Navigations" icon="ui-icon-extlink fa fa-external-link">
                                <p:submenu label="Prime Links">
                                    <p:menuitem value="Prime" url="http://www.prime.com.tr" title="xxx" />
                                    <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
                                </p:submenu>
                                <p:menuitem value="Mobile" url="#" />
                            </p:submenu>
                        </p:tieredMenu>

                        <p:separator />

                        <p:commandButton id="dynaButton" value="Show" type="button" icon="ui-icon-extlink fa fa-external-link Fs14 white" />

                        <p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:200px">
                            <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh fa fa-refresh">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk fa fa-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w fa fa-repeat" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin fa fa-bolt">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close fa fa-close" />
                            </p:submenu>
                            <p:submenu label="Navigations" icon="ui-icon-extlink fa fa-external-link">
                                <p:submenu label="Prime Links">
                                    <p:menuitem value="Prime" url="http://www.prime.com.tr" />
                                    <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
                                </p:submenu>
                                <p:menuitem value="Mobile" url="#" />
                            </p:submenu>
                        </p:tieredMenu>
                    </h:form>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box">
            <div class="Container100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">MenuBar</h1>
                    <h:form>
                        <p:menubar>
                            <p:submenu label="File" icon="ui-icon-document fa fa-file">
                                <p:submenu label="New" icon="ui-icon-contact fa fa-plus">
                                    <p:menuitem value="Project" url="#" />
                                    <p:menuitem value="Other" url="#" />
                                </p:submenu>
                                <p:menuitem value="Open" url="#" />
                                <p:separator />
                                <p:menuitem value="Quit" url="#" />
                            </p:submenu>

                            <p:submenu label="Edit" icon="ui-icon-pencil fa fa-pencil">
                                <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w fa fa-undo" />
                                <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e fa fa-repeat" />
                            </p:submenu>

                            <p:submenu label="Help" icon="ui-icon-help fa fa-life-buoy">
                                <p:menuitem value="Contents" url="#" />
                                <p:submenu label="Search" icon="ui-icon-search fa fa-search">
                                    <p:submenu label="Text">
                                        <p:menuitem value="Workspace" url="#" />
                                    </p:submenu>
                                    <p:menuitem value="File" url="#" />
                                </p:submenu>
                            </p:submenu>

                            <p:submenu label="Actions" icon="ui-icon-gear fa fa-gear">
                                <p:submenu label="Ajax" icon="ui-icon-refresh fa fa-refresh">
                                    <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-disk fa fa-save" update="messages"/>
                                    <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-arrowrefresh-1-w fa fa-refresh" update="messages"/>
                                </p:submenu>
                                <p:submenu label="Non-Ajax" icon="ui-icon-newwin fa fa-bolt">
                                    <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close fa fa-close" update="messages" ajax="false"/>
                                </p:submenu>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close fa fa-close" />

                            <f:facet name="options">
                                <p:inputText style="margin-right:10px" placeholder="Search"/>
                                <p:commandButton type="button" value="Logout" icon="ui-icon-extlink fa fa-external-link Fs14 white" />
                            </f:facet>
                        </p:menubar>
                    </h:form>

                    <div class="EmptyBox20"/>

                    <h1 class="BigTopic">MegaMenu - Vertical</h1>
                    <h:form>
                        <p:megaMenu orientation="vertical">
                            <p:submenu label="TV" icon="ui-icon-check fa fa-desktop">
                                <p:column>
                                    <p:submenu label="TV.1">
                                        <p:menuitem value="TV.1.1" url="#" />
                                        <p:menuitem value="TV.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.2">
                                        <p:menuitem value="TV.2.1" url="#" />
                                        <p:menuitem value="TV.2.2" url="#" />
                                        <p:menuitem value="TV.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="TV.4">
                                        <p:menuitem value="TV.4.1" url="#" />
                                        <p:menuitem value="TV.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.5">
                                        <p:menuitem value="TV.5.1" url="#" />
                                        <p:menuitem value="TV.5.2" url="#" />
                                        <p:menuitem value="TV.5.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <strong>Image</strong>
                                    <p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Sports" icon="ui-icon-document fa fa-child">
                                <p:column>
                                    <p:submenu label="Sports.1">
                                        <p:menuitem value="Sports.1.1" url="#" />
                                        <p:menuitem value="Sports.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.2">
                                        <p:menuitem value="Sports.2.1" url="#" />
                                        <p:menuitem value="Sports.2.2" url="#" />
                                        <p:menuitem value="Sports.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Sports.4">
                                        <p:menuitem value="Sports.4.1" url="#" />
                                        <p:menuitem value="Sports.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.5">
                                        <p:menuitem value="Sports.5.1" url="#" />
                                        <p:menuitem value="Sports.5.2" url="#" />
                                        <p:menuitem value="Sports.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                                <p:column>
                                    <p:submenu label="Sports.7">
                                        <p:menuitem value="Sports.7.1" url="#" />
                                        <p:menuitem value="Sports.7.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Entertainment" icon="ui-icon-pencil fa fa-magic">
                                <p:column>
                                    <p:submenu label="Entertainment.1">
                                        <p:menuitem value="Entertainment.1.1" url="#" />
                                        <p:menuitem value="Entertainment.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.2">
                                        <p:menuitem value="Entertainment.2.1" url="#" />
                                        <p:menuitem value="Entertainment.2.2" url="#" />
                                        <p:menuitem value="Entertainment.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Entertainment.4" icon="ui-icon-help">
                                        <p:menuitem value="Entertainment.4.1" url="#" />
                                        <p:menuitem value="Entertainment.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.5">
                                        <p:menuitem value="Entertainment.5.1" url="#" />
                                        <p:menuitem value="Entertainment.5.2" url="#" />
                                        <p:menuitem value="Entertainment.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Tech" icon="ui-icon-contact fa fa-space-shuttle">
                                <p:column>
                                    <p:submenu label="Tech.1">
                                        <p:menuitem value="Tech.1.1" url="#" />
                                        <p:menuitem value="Tech.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Tech.2">
                                        <p:menuitem value="Tech.2.1" url="#" />
                                        <p:menuitem value="Tech.2.2" url="#" />
                                        <p:menuitem value="Tech.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Tech.4">
                                        <p:menuitem value="Tech.4.1" url="#" />
                                        <p:menuitem value="Tech.4.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close fa fa-close" />
                        </p:megaMenu>
                    </h:form>

                    <div class="EmptyBox20"/>

                    <h1 class="BigTopic">MegaMenu - Horizontal</h1>
                    <h:form>
                        <p:megaMenu orientation="horizontal">
                            <p:submenu label="TV" icon="ui-icon-check fa fa-desktop">
                                <p:column>
                                    <p:submenu label="TV.1">
                                        <p:menuitem value="TV.1.1" url="#" />
                                        <p:menuitem value="TV.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.2">
                                        <p:menuitem value="TV.2.1" url="#" />
                                        <p:menuitem value="TV.2.2" url="#" />
                                        <p:menuitem value="TV.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="TV.4">
                                        <p:menuitem value="TV.4.1" url="#" />
                                        <p:menuitem value="TV.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.5">
                                        <p:menuitem value="TV.5.1" url="#" />
                                        <p:menuitem value="TV.5.2" url="#" />
                                        <p:menuitem value="TV.5.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <strong>Image</strong>
                                    <p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Sports" icon="ui-icon-document fa fa-child">

                                <p:column>
                                    <p:submenu label="Sports.1">
                                        <p:menuitem value="Sports.1.1" url="#" />
                                        <p:menuitem value="Sports.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.2">
                                        <p:menuitem value="Sports.2.1" url="#" />
                                        <p:menuitem value="Sports.2.2" url="#" />
                                        <p:menuitem value="Sports.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Sports.4">
                                        <p:menuitem value="Sports.4.1" url="#" />
                                        <p:menuitem value="Sports.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.5">
                                        <p:menuitem value="Sports.5.1" url="#" />
                                        <p:menuitem value="Sports.5.2" url="#" />
                                        <p:menuitem value="Sports.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                                <p:column>
                                    <p:submenu label="Sports.7">
                                        <p:menuitem value="Sports.7.1" url="#" />
                                        <p:menuitem value="Sports.7.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Entertainment" icon="ui-icon-pencil fa fa-magic">
                                <p:column>
                                    <p:submenu label="Entertainment.1">
                                        <p:menuitem value="Entertainment.1.1" url="#" />
                                        <p:menuitem value="Entertainment.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.2">
                                        <p:menuitem value="Entertainment.2.1" url="#" />
                                        <p:menuitem value="Entertainment.2.2" url="#" />
                                        <p:menuitem value="Entertainment.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Entertainment.4" icon="ui-icon-help">
                                        <p:menuitem value="Entertainment.4.1" url="#" />
                                        <p:menuitem value="Entertainment.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.5">
                                        <p:menuitem value="Entertainment.5.1" url="#" />
                                        <p:menuitem value="Entertainment.5.2" url="#" />
                                        <p:menuitem value="Entertainment.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Tech" icon="ui-icon-contact fa fa-space-shuttle">
                                <p:column>
                                    <p:submenu label="Tech.1">
                                        <p:menuitem value="Tech.1.1" url="#" />
                                        <p:menuitem value="Tech.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Tech.2">
                                        <p:menuitem value="Tech.2.1" url="#" />
                                        <p:menuitem value="Tech.2.2" url="#" />
                                        <p:menuitem value="Tech.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Tech.4">
                                        <p:menuitem value="Tech.4.1" url="#" />
                                        <p:menuitem value="Tech.4.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close fa fa-close" />
                        </p:megaMenu>
                    </h:form>

                    <div class="EmptyBox20"/>

                    <h1 class="BigTopic">PanelMenu</h1>
                    <h:form>
                        <p:panelMenu style="width:300px">
                            <p:submenu label="Ajax Menuitems">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" icon="fa fa-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}"  icon="fa fa-refresh" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}"  ajax="false" icon="fa fa-close"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:submenu label="Links">
                                    <p:submenu label="PrimeFaces">
                                        <p:menuitem value="Home" url="http://www.primefaces.org" icon="fa fa-home" />
                                        <p:menuitem value="Docs" url="http://www.primefaces.org/documentation" icon="fa fa-file" />
                                        <p:menuitem value="Download" url="http://www.primefaces.org/downloads" icon="fa fa-download" />
                                        <p:menuitem value="Support" url="http://www.primefaces.org/support" icon="fa fa-ticket" />
                                    </p:submenu>
                                </p:submenu>
                                <p:menuitem value="Mobile" url="#" icon="fa fa-mobile" />
                            </p:submenu>
                        </p:panelMenu>
                    </h:form>

                    <div class="EmptyBox20"/>

                    <h1 class="BigTopic">TabMenu</h1>
                    <h:form>
                        <p:tabMenu activeIndex="#{param.i}">
                            <p:menuitem value="Overview" outcome="/menu.xhtml" icon="ui-icon-star fa fa-star">
                                <f:param name="i" value="0" />
                            </p:menuitem>
                            <p:menuitem value="Demos" outcome="/menu.xhtml" icon="ui-icon-search fa fa-search">
                                <f:param name="i" value="1" />
                            </p:menuitem>
                            <p:menuitem value="Documentation" outcome="/menu.xhtml" icon="ui-icon-document fa fa-file">
                                <f:param name="i" value="2" />
                            </p:menuitem>
                            <p:menuitem value="Support" outcome="/menu.xhtml" icon="ui-icon-wrench fa fa-wrench">
                                <f:param name="i" value="3" />
                            </p:menuitem>
                            <p:menuitem value="Social" outcome="/menu.xhtml" icon="ui-icon-person fa fa-child">
                                <f:param name="i" value="4" />
                            </p:menuitem>
                        </p:tabMenu>
                    </h:form>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box">
            <div class="Container100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Breadcrumb</h1>
                    <h:form>
                        <p:breadCrumb>
                            <p:menuitem value="Categories" url="#" />
                            <p:menuitem value="Sports" url="#" />
                            <p:menuitem value="Basketball" url="#" />
                            <p:menuitem value="NBA" url="#" />
                            <p:menuitem value="Teams" url="#" />
                            <p:menuitem value="L.A. Lakers" url="#" />
                            <p:menuitem value="Roster" url="#" />
                            <p:menuitem value="Kobe Bryant" url="#" />
                        </p:breadCrumb>
                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>